<template>
	<view class="cell">
		<view>
			<view class="flex">
				<image style="width:36rpx;height:36rpx;" src="https://oss.jxhecong.com/v2/image/oil@2x.png"></image>
				<view class="name">{{data.name}}</view>
			</view>
			<view class="code">{{data.shellId}}</view>
			<view class="info-box" v-if="!showSiteName">
				<text style="display: inline-block; background-color:#6ABF6C;width:60rpx;text-align: center;">插座</text>
				<text style="color:#6ABF6C;margin-left:12rpx;">闲{{data.expireSocketCount}}</text>
				<text style="display: inline-block;color: #303133;margin-left:6rpx;margin-right:10rpx;">/{{data.totalSocketCount}}</text>
			</view>
			<view class="code" v-if="showSiteName">{{data.chargingGroupName}}</view>
			<view class="code">
				<text>客服电话：</text>
				<text style="color: #6ABF6C;" @click.stop="makePhoneCall">{{data.servicePhone}}</text>
			</view>
		</view>
		<view>
			<image v-if="data.level == 0" style="width:52rpx;height:52rpx;" src="https://oss.jxhecong.com/v2/image/sign_0@2x.png"></image>
			<image v-if="data.level == 1" style="width:52rpx;height:52rpx;" src="https://oss.jxhecong.com/v2/image/sign_1@2x.png"></image>
			<image v-if="data.level == 2" style="width:52rpx;height:52rpx;" src="https://oss.jxhecong.com/v2/image/sign_2@2x.png"></image>
			<image v-if="data.level == 3" style="width:52rpx;height:52rpx;" src="https://oss.jxhecong.com/v2/image/sign_3@2x.png"></image>
			<image v-if="data.level == 4" style="width:52rpx;height:52rpx;" src="https://oss.jxhecong.com/v2/image/sign_4@2x.png"></image>
			<image v-if="data.level == 5" style="width:52rpx;height:52rpx;" src="https://oss.jxhecong.com/v2/image/sign_5@2x.png"></image>
			<view  v-if="data.status == 1"  class="status">在线</view>
			<view  v-else="data.status != 1"  class="status">离线</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			data:{
				type:Object,
				default:{}
			},
			showSiteName:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			makePhoneCall(){
				uni.makePhoneCall({
					phoneNumber:this.data.servicePhone
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cell{
		display:flex;
		flex-direction: row;
		justify-content: space-between;
		padding:30rpx;
	}
	.info-box{
		display:inline-table;
		justify-content: flex-start;
		align-items: center;
		border: solid 1rpx #6ABF6C;
		border-radius:6rpx;
		height:36rpx;
		margin-top:24rpx;
		font-size:24rpx;
		color:#FFFFFF;
	}
	.flex{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.name{
		color:#303133;
		font-size:32rpx;
		font-weight: bold;
		margin-left:12rpx;
	}
	.code{
		color:#909399;
		font-size:24rpx;
		margin-top:12rpx;
	}
	.status{
		color:#6ABF6C;
		font-size:24rpx;
		text-align: center;
	}
</style>
